<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>音乐播放</title>
		<link rel="stylesheet" href="css/base.css">
		<link rel="stylesheet" href="css/play.css">
	</head>
	<body>
		<!-- f1 -->
		<div class="f1">
			<img src="img/back.svg" alt="">
			<span>御剑江湖(仙剑三主题曲)</span>
		</div>
		<!-- f2 -->
		<div class="f2">
			——<span>骆集益</span>——
		</div>
		<!-- f3 -->
		<div class="f3">
			<select>
				<option>标准</option>
				<option>高清</option>
			</select>
			<select>
				<option>封面</option>
				<option>歌词</option>
			</select>
		</div>
		<!-- f4 -->
		<div class="f4">
			<img src="img/0-ShuShan.jpg" alt="">
		</div>
		<!-- f5 -->
		<ul class="f5">
			<li><img src="img/heart.svg" id="heart" alt=""></li>
			<li><img src="img/download.svg" alt=""></li>
			<li><img src="img/comment.png" alt=""></li>
			<li><img src="img/share.png" alt=""></li>
			<li><img src="img/more.png" alt=""></li>
		</ul>
		<!-- f6 -->
		<div class="f6">
			<span>0:00</span>
			<div>
				<div></div>
				<span></span>
			</div>
			<span>4:15</span>
		</div>
		
	</body>
</html>
<script>
	// 声明变量记录收藏状态
	var flag = false
	// 给心形的图片绑定点击事件
	heart.onclick = function() {
		// 如果收藏了，取消收藏，是否没有收藏可以收藏
		if(flag) {
			// 取消收藏 
			// 改变图片路径
			this.src = 'img/heart.svg'
			// 状态发生变化
			flag = false
		} else {
			// 收藏
			// 改变当前图片的路径
			this.src = 'img/heart-active.svg'
			// 状态
			flag = true
		}
	}
</script>